<template>
	<div class="page">
		<div class="header">
			<img src="../public/标题.png" alt="MDONG梦动" />
		</div>
		<div class="content">
			<div class="left">
				<img src="../左背景.png" alt="背景图" />
			</div>
			<div class="right">
				<div class="avatar">
					<!-- <img src="../public/头像.jpg" alt="头像" /> -->
				</div>
				<el-input v-model="username" placeholder="用户名"></el-input>
				<el-input type="password" v-model="password" placeholder="密码"></el-input>
				<el-checkbox v-model="rememberMe">保持会话</el-checkbox>
				<el-button type="primary" class="login-button" @click="login">登录</el-button>
			</div>
		</div>
		<div class="fotter">
			<div class="wave"></div>
			<div class="wave wave-2"></div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		ElInput,
		ElCheckbox,
		ElButton,
		ElMessage
	} from 'element-plus';

	const username = ref('');
	const password = ref('');
	const rememberMe = ref(false);

	// 模拟的用户信息
	const validUsername = 'xujinping';
	const validPassword = '20050929';

	const login = () => {
		if (username.value === '' || password.value === '') {
			ElMessage.warning('用户名和密码不能为空');
			// ElMessage({
			// 	showClose: true,
			// 	message: 'This is a message.',
			// 	grouping: true,
			// 	type: 'success',
			// })
			return;
		}

		if (username.value !== validUsername || password.value !== validPassword) {
			ElMessage.error('用户名或密码错误');
			// ElMessage({
			// 	showClose: true,
			// 	message: 'This is a message.',
			// 	grouping: true,
			// 	type: 'success',
			// })
			return;
		}

		// 调用后端接口进行登录
		console.log('登录成功');
	};
</script>

<style>
	body {
		margin: 0;
		font-family: Arial, sans-serif;
		background-color: #f5f5f5;
	}

	.page {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: white;
		box-shadow: 0 10px 20px rgba(255, 102, 0, 0.3);
		border-radius: 16px;
		overflow: hidden;
		background-image: url(../public/整页背景bg.png);
		margin-top: -50px;
		/* 添加上边距 */
		background-size: 100% 100%;

	}

	.header {
		text-align: center;
		margin-bottom: 24px;
		margin-top: -30px;
		/* 添加上边距 */
	}

	.header img {
		width: 100%;
	}

	.header h1 {
		font-size: 24px;
		color: #333;
		margin: 8px 0 0;
	}

	.content {
		display: flex;
		width: 100%;
		max-width: 800px;
	}

	.left {
		flex: 1;
		background-color: #ffaaff;
		border-radius: 16px 0 0 16px;
		overflow: hidden;
	}

	.left img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.right {
		flex: 1;
		padding: 40px;
		background-color: white;
		text-align: center;
		border-radius: 0 16px 16px 0;
	}

	.avatar {
		width: 80px;
		height: 80px;
		background-color: #eee;
		border-radius: 50%;
		margin: 0 auto 24px;
	}

	.el-input,
	.el-checkbox,
	.login-button {
		width: 100%;
		margin-bottom: 16px;
	}

	.login-button {
		width: 339px;
		height: 50px;
		line-height: 30px;
		font-size: 18px;
		color: white;
		background: url(../public/登录.png) no-repeat;
		background-size: cover;
		border: none;
		outline: none;
	}

	.login-button:hover {
		background-color: #ffffff;
	}

	.fotter {
		width: 100%;
		height: 251px;
		position: absolute;
		bottom: 0;
		overflow: hidden;
	}

	/* 添加波动效果的关键帧动画 */
	@keyframes wave {

		0% {
			transform: translateX(0);
		}

		50% {
			transform: translateX(-50%);
		}
	}

	@keyframes wave-2 {

		0% {
			transform: translateX(-50%);
		}

		50% {
			transform: translateX(0);
		}
	}

	/* 应用波动效果的元素 */
	.wave {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 200%;
		height: 100%;
		background: url(../public/流动效果.png) repeat-x;
		background-size: 50% 100%;
		transform-origin: center bottom;
		animation: wave 20s linear infinite;
	}

	.wave-2 {
		opacity: 0.5;
		animation: wave-2 15s linear infinite;
	}

	@keyframes wave {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-50%);
		}
	}

	@keyframes wave-2 {
		0% {
			transform: translateX(-50%);
		}

		100% {
			transform: translateX(0);
		}
	}
</style>